// 创建模板

const pieChartTemplate = document.createElement("template");
pieChartTemplate.innerHTML = `
    <style>
        :host {
            display: block;
            width: 100%;
            height: 100%;
        }
        .chart-container {
            width: 100%;
            height: 100%;
        }
    </style>
    <div class="chart-container"></div>
`;

class LineChartComponent extends HTMLElement {
    constructor() {
        super();

        this.chart = null;
        // 创建 Shadow DOM
        const shadow = this.attachShadow({ mode: 'closed' });

        // 克隆模板内容
        shadow.appendChild(pieChartTemplate.content.cloneNode(true));

        // 获取图表容器
        const chartDiv = shadow.querySelector('.chart-container');

        // 初始化定时器和图表实例
        this.timerId = null;
        this.chart = echarts.init(chartDiv);

    }
    // 监听的属性列表
    static get observedAttributes() {
        console.log("折线监听属性："+ getAttributesByType('line'))
        return window.getAttributesByType('line');
    }

    // 默认值
    connectedCallback() {
        // 导入工具函数（假设已从外部文件导入）
        const {buildConfig } = window.attributeUtils;
        const titleAttrs = [
            ['title-text_text', '销售数据统计'],
            ['title-show_radio', true],
            ['title-left_slider', 'center'],
            ['title-top_slider', ''],
            ['title-right_slider', ''],
            ['title-bottom_slider', ''],
            ['title-textalign_select', 'center'],
            ['title-textstyle-color_colorpicker', '#333'],
            ['title-textstyle-fontsize_number', 18],
            ['title-textstyle-fontweight_select', 'bold'],
            ['title-subtext_text', '2023年度数据'],
            ['title-subtextstyle-color_colorpicker', '#666'],
            ['title-subtextstyle-fontsize_number', 14],
            ['title-subtextstyle-fontweight_select', 'normal'],
        ]
        const gridAttrs = [
            ['grid-left_slider', '10%'],
            ['grid-right_slider', '5%'],
            ['grid-bottom_slider', '15%'],
            ['grid-top_slider', '15%'],
            ['grid-containlabel_radio', true],
        ];
        const xAxisAttrs = [
            ['xaxis-type_text', 'category'],
            ['xaxis-data_array', JSON.stringify(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])],
        ];
        const yAxisAttrs = [
            ['yaxis-type_text', 'category'],
        ];
        const legendAttrs = [
            ['legend-show_radio', true],
            ['legend-textstyle-color_colorpicker', '#666'],
            ['legend-itemstyle-color_colorpicker', 'auto'],
            ['legend-itemheight_number', 14],
            ['legend-itemwidth_number', 25],
            ['legend-bottom_number', "90%"],
            ['legend-top_number', "90%"],
            ['legend-left_number', '"50"'],
            ['legend-itemgap_number', 20],
            ['legend-textstyle-fontsize_number', 12]
        ];
        const seriesAttrs = [
            ['base-data-url_text', ''],
            ['series-type_select', 'line'],
            ['series-smooth_radio', false],
            ['series-areastyle-color_colorpicker', ''],
            ['series-areastyle-show_radio', false],
            ['series-areastyle-color-gradient-show_radio', false],
            ['series-areastyle-color-start_colorpicker', ''],
            ['series-areastyle-color-end_colorpicker', ''],
        ]
        // 生成 config
        const titleConfig = buildConfig(this, titleAttrs);
        const gridConfig = buildConfig(this, gridAttrs);
        const xAxisConfig = buildConfig(this,xAxisAttrs);
        const yAxisConfig = buildConfig(this,yAxisAttrs);
        const legendConfig = buildConfig(this, legendAttrs);
        const seriesConfig = buildConfig(this, seriesAttrs);

        // 调整初始大小
        this.resizeChart();
        // 监听 resize 事件
        window.addEventListener('resize', this.resizeChart.bind(this));
        // 观察父容器的大小变化
        if (ResizeObserver) {
            this.observer = new ResizeObserver(() => this.resizeChart());
            this.observer.observe(this.parentElement);
        }
        // 2. 定义默认渐变色彩方案（可根据需要扩展更多）
        const defaultGradients = [
            // 系列1默认渐变（蓝）
            {
                start: 'rgb(128, 255, 165)',
                end: 'rgb(1, 191, 236)'
            },
            // 系列2默认渐变（绿）
            {
                start: 'rgb(0, 221, 255)',
                end: 'rgb(77, 119, 255)'
            },
            // 系列3默认渐变（红）
            {
                start: 'rgb(55, 162, 255)',
                end: 'rgb(116, 21, 219)'
            },
            // 系列4默认渐变（紫）
            {
                start: 'rgb(255, 0, 135)',
                end: 'rgb(135, 0, 157)'
            },
            // 系列4默认渐变（紫）
            {
                start: 'rgb(255, 191, 0)',
                end: 'rgb(224, 62, 76)'
            }
        ];
        // 加载数据并渲染饼图
        if (seriesConfig.dataUrl) {
            fetch(seriesConfig.dataUrl).then(res => res.json()).then(data => {
                let dataDemo = data;

                // 生成series数组（遍历所有数据组）
                const series = dataDemo.map((item, index) => {
                    // 选择默认渐变（超过预设数量时循环使用）
                    const gradientIndex = index % defaultGradients.length;
                    const defaultGradient = defaultGradients[gradientIndex];

                    // 获取当前组的键名（如"销售"）
                    const key = Object.keys(item)[0];
                    // 为避免名称重复，添加索引区分（如"销售1"、"销售2"）
                    const seriesName = `${key}${index + 1}`;
                    // 当前组的数据集
                    const dataList = item[key];
                    return {
                        name: seriesName,
                        data: dataList.map(item => item.value), // 提取value作为数据
                        type: 'line',
                        stack: 'Total',
                        smooth: seriesConfig.smooth,
                        ...(seriesConfig.areastyleShow ? {  // 判断是否显示区域填充
                            areaStyle: {
                                // 根据渐变开关决定使用渐变还是纯色
                                color: seriesConfig.areastyleColorGradientShow === true
                                    ? new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        { offset: 0, color: seriesConfig.areastyleColorStart || defaultGradient.start },
                                        { offset: 1, color: seriesConfig.areastyleColorEnd || defaultGradient.end }
                                    ])
                                    : seriesConfig.areastyleColor // 纯色
                            }
                        } : {}),

                    };
                });

                // 确保X轴数据与所有系列的name对应
                xAxisConfig.data = dataDemo[0][Object.keys(dataDemo[0])[0]].map(item => item.name);

                const option = {
                    grid: {
                        left: gridConfig.left,
                        right: gridConfig.right,
                        bottom: gridConfig.bottom,
                        top: gridConfig.top,
                        containLabel: gridConfig.containlabel,
                    },
                    title: {
                        show: titleConfig.show,
                        text: titleConfig.text,
                        left: titleConfig.left,
                        right: titleConfig.right,
                        top: titleConfig.top,
                        bottom: titleConfig.bottom,
                        textAlign: titleConfig.textalign,
                        textStyle: {
                            color: titleConfig.textstyleColor,
                            fontSize: titleConfig.textstyleFontsize,
                            fontWeight: titleConfig.textstyleFontweight,
                        },
                        subtext: titleConfig.subtext,
                        subtextStyle: {
                            color: titleConfig.subtextstyleColor,
                            fontSize: titleConfig.subtextstyleFontsize,
                            fontWeight: titleConfig.subtextstyleFontweight,
                        },
                    },
                    legend: {
                        show: legendConfig.show,
                        bottom: legendConfig.bottom,
                        left: legendConfig.left,
                        top: legendConfig.top,
                        orient: legendConfig.orient,
                        itemWidth: legendConfig.itemwidth,
                        itemHeight: legendConfig.itemheight,
                        textStyle: {
                            color: legendConfig.textstyleColor,
                            fontSize: legendConfig.textstyleFontsize
                        },
                        itemStyle: {
                            color: legendConfig.itemstyleColor
                        },
                        itemGap: legendConfig.itemgap,
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        type: 'category',
                        data: xAxisConfig.data
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: series
                };

                console.log("折线图配置： "+ JSON.stringify(option))
                this.chart.setOption(option);

            });
        }

        // 执行外部初始化脚本
        if (seriesConfig.echartInitScript) {
            try {
                eval(seriesConfig.echartInitScript);
            } catch (e) {
                console.error('执行初始化脚本错误:', e);
            }
        }
    }



    // 属性变化时更新图表
    attributeChangedCallback(name, oldValue, newValue) {
        console.log("回调接收的原始参数：", {
            name: name,
            nameType: typeof name,
            nameLength: name.length, // 空字符串时为 0
            oldValue: oldValue,
            newValue: newValue
        });
        if (name) {
            const currentOptions = this.chart.getOption();
            if (!currentOptions) return;

            switch (name) {
                case 'series-areastyle-color-gradient-show_radio':
                    // 1. 兼容字符串和布尔值的状态判断
                    const isGradient = newValue === 'true' || newValue === true;

                    // 2. 定义默认渐变色彩方案（可根据需要扩展更多）
                    const defaultGradients = [
                        // 系列1默认渐变（蓝）
                        {
                            start: 'rgb(128, 255, 165)',
                            end: 'rgb(1, 191, 236)'
                        },
                        // 系列2默认渐变（绿）
                        {
                            start: 'rgb(0, 221, 255)',
                            end: 'rgb(77, 119, 255)'
                        },
                        // 系列3默认渐变（红）
                        {
                            start: 'rgb(55, 162, 255)',
                            end: 'rgb(116, 21, 219)'
                        },
                        // 系列4默认渐变（紫）
                        {
                            start: 'rgb(255, 0, 135)',
                            end: 'rgb(135, 0, 157)'
                        },
                        // 系列4默认渐变（紫）
                        {
                            start: 'rgb(255, 191, 0)',
                            end: 'rgb(224, 62, 76)'
                        }
                    ];

                    // 3. 安全检查：确保系列配置存在
                    if (!currentOptions || !currentOptions.series || !Array.isArray(currentOptions.series)) {
                        console.warn("系列配置不存在，无法更新渐变状态");
                        break;
                    }

                    // 4. 遍历所有系列，为每个系列分配默认渐变
                    currentOptions.series.forEach((series, index) => {
                        // 仅处理有区域填充的系列
                        if (series.areaStyle) {
                            if (isGradient) {
                                // 选择默认渐变（超过预设数量时循环使用）
                                const gradientIndex = index % defaultGradients.length;
                                const defaultGradient = defaultGradients[gradientIndex];

                                // 渐变模式：优先使用seriesConfig配置，否则使用默认渐变
                                series.areaStyle.color = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color:  defaultGradient.start
                                    },
                                    {
                                        offset: 1,
                                        color:  defaultGradient.end
                                    }
                                ]);
                            } else {
                                // 纯色模式：为不同系列设置默认纯色（与渐变起始色对应）
                                const colorIndex = index % defaultGradients.length;
                                series.areaStyle.color = defaultGradients[colorIndex].start.replace('0.6', '0.3');
                            }
                        }
                    });

                    // 5. 应用更新
                    this.chart.setOption(currentOptions);
                    break;
                case 'series-areastyle-show_radio':
                    var showBool = newValue === "true";
                    if (currentOptions && currentOptions.series && currentOptions.series[0]) {
                        if (showBool) {
                            currentOptions.series[0].areaStyle = {
                                color: 'rgba(0,123,255,0.3)' // 你可以换成动态颜色
                            };
                        } else {
                            delete currentOptions.series[0].areaStyle;
                        }
                    }
                    // 设置新的选项（notMerge 保证覆盖）
                    this.chart.setOption(currentOptions, true);
                    break;

                case 'series-areastyle-color_colorpicker':
                    // 更新X轴数据
                    currentOptions.series[0].areaStyle.color = newValue;
                    // 设置新的选项
                    this.chart.setOption(currentOptions);
                    break;
                case 'series-smooth_radio':
                    var showBool = newValue === "true";
                    // 遍历所有系列，更新每个系列的smooth属性
                    currentOptions.series.forEach(series => {
                        // 只更新折线图类型的系列（可选）
                        if (series.type === 'line') {
                            series.smooth = showBool;
                        }
                    });
                    // 设置新的选项
                    this.chart.setOption(currentOptions);
                    break;
                case 'title-show_radio':
                    var showBool = newValue === "true";
                    // 更新X轴数据
                    currentOptions.title[0].show = showBool;
                    // 设置新的选项
                    this.chart.setOption(currentOptions);
                    break;

                case 'title-text_text':
                    currentOptions.title[0].text = newValue;
                    // 设置新的选项
                    this.chart.setOption(currentOptions);
                    break;

                case 'title-textstyle-color_colorpicker':
                    // 更新X轴数据
                    currentOptions.title[0].textStyle.color = newValue;
                    // 设置新的选项
                    this.chart.setOption(currentOptions);
                    break;

                case 'title-textstyle-fontsize_number':
                    // 更新X轴数据
                    currentOptions.title[0].textStyle.fontSize = newValue;
                    // 设置新的选项
                    this.chart.setOption(currentOptions);
                    break;
                case 'title-textstyle-fontweight_select':
                    // 更新X轴数据
                    currentOptions.title[0].textStyle.fontWeight = newValue;
                    // 设置新的选项
                    this.chart.setOption(currentOptions);
                    break;

                case 'title-subtext_text':
                    // 更新X轴数据
                    currentOptions.title[0].subtext = newValue;
                    // 设置新的选项
                    this.chart.setOption(currentOptions);
                    break;
                case 'title-subtextstyle-fontsize_number':
                    // 更新X轴数据
                    currentOptions.title[0].subtextStyle.fontSize = newValue;
                    // 设置新的选项
                    this.chart.setOption(currentOptions);
                    break;
                case 'title-subtextstyle-fontweight_select':
                    // 更新X轴数据
                    currentOptions.title[0].subtextStyle.fontWeight = newValue;
                    // 设置新的选项
                    this.chart.setOption(currentOptions);
                    break;

                case 'title-left_slider':
                    // 更新
                    currentOptions.title[0].left = `${newValue}%`;
                    // 设置新的选项
                    this.chart.setOption(currentOptions);
                    break;
                case 'title-top_slider':
                    // 更新
                    currentOptions.title[0].top = `${newValue}%`;
                    // 设置新的选项
                    this.chart.setOption(currentOptions);
                    break;
                case 'title-right_slider':
                    currentOptions.title[0].right = `${newValue}%`;
                    // 设置新的选项
                    this.chart.setOption(currentOptions);
                    break;
                case 'title-bottom_slider':
                    currentOptions.title[0].bottom = `${newValue}%`;
                    // 设置新的选项
                    this.chart.setOption(currentOptions);
                    break;
                case 'title-itemgap_number':
                    currentOptions.title[0].itemGap = newValue;
                    // 设置新的选项
                    this.chart.setOption(currentOptions);
                    break;
                case 'title-textalign_select':
                    currentOptions.title[0].textAlign = newValue;
                    // 设置新的选项
                    this.chart.setOption(currentOptions);
                    break;
                case 'title-subtextstyle-color_colorpicker':
                    currentOptions.title[0].subtextStyle.color = newValue;
                    // 设置新的选项
                    this.chart.setOption(currentOptions);
                    break;
                case 'grid-left_slider':
                    currentOptions.grid[0].left = `${newValue}%`;
                    // 设置新的选项
                    this.chart.setOption(currentOptions);
                    break;
                case 'grid-right_slider':
                    currentOptions.grid[0].right = `${newValue}%`;
                    // 设置新的选项
                    this.chart.setOption(currentOptions);
                    break;
                case 'grid-bottom_slider':
                    currentOptions.grid[0].bottom = `${newValue}%`;
                    // 设置新的选项
                    this.chart.setOption(currentOptions);
                    break;
                case 'grid-top_slider':
                    currentOptions.grid[0].top = `${newValue}%`;
                    // 设置新的选项
                    this.chart.setOption(currentOptions);
                    break;
                case 'legend-show_radio':
                    var showBool = newValue === "true";
                    // 图例的显示
                    currentOptions.legend[0].show = showBool;
                    // 设置新的选项
                    this.chart.setOption(currentOptions);
                    break;
                case 'legend-textstyle-color_colorpicker':
                    // 更新X轴数据
                    currentOptions.legend[0].textStyle.color = newValue;
                    // 设置新的选项
                    this.chart.setOption(currentOptions);
                    break;
                case 'legend-textstyle-fontsize_number':
                    // 获取当前值
                    currentOptions.legend[0].textStyle.fontSize = newValue;
                    // 获取当前值
                    this.chart.setOption(currentOptions);
                    break;
                case 'legend-textstyle-fontweight_select':
                    // 获取当前值
                    currentOptions.legend[0].textStyle.fontWeight = newValue;
                    // 获取当前值
                    this.chart.setOption(currentOptions);
                    break;
                case 'legend-textstyle-fontstyle_select':
                    // 获取当前值
                    currentOptions.legend[0].textStyle.fontStyle = newValue;
                    this.chart.setOption(currentOptions);
                    break;
                case 'legend-itemstyle-color_colorpicker':
                    // 获取当前值
                    currentOptions.legend[0].itemStyle.color = newValue;
                    this.chart.setOption(currentOptions);
                    break;
                case 'legend-itemheight_number':
                    // 获取当前值
                    currentOptions.legend[0].itemHeight = parseInt(newValue);
                    this.chart.setOption(currentOptions);
                    break;
                case 'legend-itemwidth_number':
                    // 获取当前值
                    currentOptions.legend[0].itemWidth = parseInt(newValue);
                    this.chart.setOption(currentOptions);
                    break;
                case 'legend-bottom_number':
                    // 获取当前值
                    currentOptions.legend[0].bottom = `${newValue}%`;
                    this.chart.setOption(currentOptions);
                    break;
                case 'legend-top_number':
                    // 获取当前值
                    currentOptions.legend[0].top = `${newValue}%`;
                    this.chart.setOption(currentOptions);
                    break;
                case 'legend-right_number':
                    // 获取当前值
                    currentOptions.legend[0].right = `${newValue}%`;
                    this.chart.setOption(currentOptions);
                    break;
                case 'legend-itemgap_number':
                    // 获取当前值
                    currentOptions.legend[0].itemGap = parseInt(newValue);
                    this.chart.setOption(currentOptions);
                    break;
                case 'series-itemstyle-color_array':
                    var newValue_array = newValue.split(",");
                    if (newValue_array.length>0){
                        if (currentOptions.series.length > 0){
                            // 更新颜色配置
                            currentOptions.series[0].itemStyle.color = function(params) {
                                return newValue_array[params.dataIndex];
                            };
                            // 设置新的选项
                            this.chart.setOption(currentOptions);
                        }

                    }
                    break;
                case 'pie-label-show_radio':
                    var showBool = newValue === "true";
                    // 图例的显示
                    currentOptions.series[0].label.show = showBool;
                    // 设置新的选项
                    this.chart.setOption(currentOptions);
                    break;
                case 'pie-label-position_select':
                    // 图例的显示
                    currentOptions.series[0].label.position = newValue;
                    // 设置新的选项
                    this.chart.setOption(currentOptions);
                    break;
                case 'pie-label-formatter_text':
                    // 图例的显示
                    currentOptions.series[0].label.formatter = newValue;
                    // 设置新的选项
                    this.chart.setOption(currentOptions);
                    break;
                case 'pie-labelline-show_radio':
                    var showBool = newValue === "true";
                    // 图例的显示
                    currentOptions.series[0].labelLine.show = showBool;
                    // 设置新的选项
                    this.chart.setOption(currentOptions);
                    break;
                case 'pie-labelline-length_number':
                    // 图例的显示
                    currentOptions.series[0].labelLine.length = parseInt(newValue);
                    // 设置新的选项
                    this.chart.setOption(currentOptions);
                    break;
                case 'pie-labelline-length2_number':
                    // 图例的显示
                    currentOptions.series[0].labelLine.length2 = parseInt(newValue);
                    // 设置新的选项
                    this.chart.setOption(currentOptions);
                    break;

                case 'echart-timer':
                    this.setTimer(parseInt(newValue) * 1000);
                    break;

                case 'echart-timer-script':
                    if (this.echarttimerscript === "") {
                        clearInterval(this.timerId);
                    } else {
                        this.setTimer(parseInt(this.echarttimer) * 1000);
                    }
                    break;

                case 'echart-init-script':
                    if (this.echartinitscript !== "") {
                        try {
                            eval(this.echartinitscript);
                        } catch (error) {
                            console.log(error.message);
                        }
                    }
                    break;

                case 'base-data-url_text':
                    this.updateData(newValue);
                    break;
            }
        }
    }

    // 组件断开连接时清理资源
    disconnectedCallback() {
        // 移除 resize 事件监听器
        window.removeEventListener('resize', this.resizeChart.bind(this));

        // 停止观察父容器的大小变化
        if (this.observer) {
            this.observer.disconnect();
        }

        // 清除定时器
        clearInterval(this.timerId);
    }

    // 设置定时器
    setTimer(interval) {
        // 清除之前的定时器
        clearInterval(this.timerId);
        if (interval > 0) {
            this.timerId = setInterval(() => {
                this.executeScript();
            }, interval);
        }
    }

    // 执行脚本
    executeScript() {
        if (this.echarttimerscript !== "") {
            try {
                eval(this.echarttimerscript);
            } catch (error) {
                console.log(error.message);
            }
        } else {
            console.log("no script to execute");
        }
    }

    // 调整图表大小
    resizeChart() {
        this.chart.resize();
    }

    // 获取图表实例
    getChartInstance() {
        return this.chart;
    }

    // 更新数据
    async updateData(dataurl) {
        try {
            // 1. 验证并请求数据
            // 检查数据URL是否有效
            if (!dataurl) {
                throw new Error("数据请求URL不能为空");
            }
            // 新增：检查图表实例是否存在
            if (!this.chart) {
                throw new Error("图表实例未初始化，请先创建图表");
            }

            // 发起异步请求获取数据
            const response = await fetch(dataurl);
            // 检查HTTP响应状态是否正常
            if (!response.ok) {
                throw new Error(`HTTP请求失败! 状态码: ${response.status}`);
            }

            // 解析响应数据为JSON格式
            const data = await response.json();

            // 2. 处理有效数据
            if (data && Array.isArray(data) && data.length > 0) {
                // 生成新的系列配置（完全基于新数据，而非增量更新）
                const series = data.map((item, index) => {
                    // 获取当前数据项的唯一键名（如"销售"、"产量"等）
                    const key = Object.keys(item)[0];
                    // 生成系列名称，添加索引避免重名（如"销售1"、"销售2"）
                    const seriesName = `${key}${index + 1}`;
                    // 提取当前系列的数据集
                    const dataList = item[key];

                    // 安全验证：确保数据集为有效数组
                    if (!Array.isArray(dataList)) {
                        console.warn(`第${index + 1}组数据格式错误，已跳过`);
                        return null;
                    }

                    // 获取当前图表中已有的系列配置
                    const originalSeries = this.chart.getOption().series || [];
                    // 优先使用同索引的原有配置，若无则使用最后一个配置作为基础
                    const baseConfig = originalSeries[index] || originalSeries[originalSeries.length - 1];

                    // 构建新系列配置
                    return {
                        // 复制原有配置（深拷贝避免引用问题）
                        ...(baseConfig ? JSON.parse(JSON.stringify(baseConfig)) : {}),
                        // 更新系列名称
                        name: seriesName,
                        // 更新核心数据（提取value值）
                        data: dataList.map(item => item?.value ?? 0), // 容错处理：缺失值默认为0
                        // 确保类型为折线图
                        type: 'line'
                    };
                }).filter(Boolean); // 过滤无效的系列配置

            // 更新X轴数据（基于第一组数据的name字段）
                const firstItem = data[0];
                const firstKey = firstItem ? Object.keys(firstItem)[0] : null;
                const xAxisData = firstKey && Array.isArray(firstItem[firstKey])
                    ? firstItem[firstKey].map(item => item?.name || `未知名称`) // 修复变量未定义问题
                    : [];

            // 确保新的series数组完全覆盖原有数组，删除多余系列
                this.chart.setOption({
                    xAxis: {
                        data: xAxisData // 更新X轴类目数据
                    },
                    series: series // 新的系列数组（数量可能少于原有）
                }, {
                    replaceMerge: ['xAxis', 'series'] // 指定需要替换的配置项
                });


                console.log("折线图数据更新成功");
            } else {
                // 处理空数据或无效数据场景
                console.warn("未获取到有效数据，清空图表");
                this.chart.setOption({
                    xAxis: { data: [] },
                    series: []
                });
            }

        } catch (error) {
            // 统一错误处理
            console.error(`数据更新失败: ${error.message}`);
        }
    }

}

// 定义新的 HTML 元素
customElements.define('line-chart-component', LineChartComponent);
